<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
</head>
<style>
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 225px;
    }

    .el-radio {
        color: #606266;
        cursor: pointer;
        margin-right: 0px;
    }
    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 32px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    .el-table .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 15px;
        padding-right: 0px;
    }
    #page {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 34px;
        width: 100%;
        text-align: start;
        /*background: #393D49;*/
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }
</style>
<body>
<div id="app">
    <el-row class="el-search-row-d" style="margin-right: auto">
        <template>
            <el-radio v-model="status" label="0" @change="init">预约</el-radio>
            <el-radio v-model="status" label="1" @change="init">过期未取号</el-radio>
            <el-radio v-model="status" label="2" @change="init">已取号</el-radio>
            <el-radio v-model="status" label="3" @change="init">患者取消</el-radio>
            <el-radio v-model="status" label="4" @change="init">医生停诊</el-radio>
            <el-radio v-model="status" label="5" @change="init">后台取消</el-radio>
            <el-radio v-model="status" label="6" @change="init">全部</el-radio>
        </template>
        <el-input
                placeholder="科室名称"
                v-model="depName"
                style="width: fit-content"
                @change="init"
                @keyup.native="chinese"
                clearable>
        </el-input>
        <el-input
                placeholder="医生名称"
                v-model="doctorName"
                style="width: fit-content"
                @change="init"
                @keyup.native="chinese"
                clearable>
        </el-input>
        <el-input
                placeholder="患者姓名"
                v-model="patName"
                style="width: fit-content"
                @change="init"
                @keyup.native="chinese"
                clearable>
        </el-input>
        <el-date-picker
                id="datePicker"
                v-model="datePickerArray"
                size="small" type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-checkbox v-model="isVisit" @change="init">预约/就诊</el-checkbox>
        <el-button type="primary" icon="el-icon-search" @click="init">搜索</el-button>
        <el-button type="primary"  @click="exportExcel">导出</el-button>
        <el-button type="primary" @click="dialogFormOpen">立即预约</el-button>
    </el-row>
    <el-dialog :close-on-click-modal="false" title="患者预约" :visible.sync="dialogFormVisible" @close="closeDiglog">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row type="fix">
                <el-col :span="12">
                    <el-form-item label="检索患者">

                        <el-select
                                v-model="patients"
                                filterable
                                remote
                                reserve-keyword
                                clearable
                                placeholder="请输入姓名/手机号/身份证号"
                                @clear="clearPatients"
                                @change="patientsChange"
                                :remote-method="remoteMethod"
                                :loading="loading">
                            <el-option
                                    v-for="item in patientsList"
                                    :key="item.id"
                                    :label="item.patName+'/'+item.patIdentityNum+'/'+item.patSexWrapper+'/'+item.patPhone"
                                    :value="item">
                            </el-option>
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="预约方式" prop="spName">
                        <el-select v-model="ruleForm.spName" placeholder="请选择">
                            <el-option label="电话预约" value="电话预约"></el-option>
                            <el-option label="诊间预约" value="诊间预约"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="fix">
                <el-col :span="12">
                    <el-form-item label="姓名" prop="patName">
                        <el-input v-model="ruleForm.patName" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="ruleForm.phone" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row type="fix">
                <el-col :span="12">
                    <el-form-item label="性别" prop="patSex">
                        <el-select v-model="ruleForm.patSex" placeholder="请选择" >
                            <el-option label="男" :value=1></el-option>
                            <el-option label="女" :value=0></el-option>
                            <el-option label="未知" :value=2></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证" prop="patIdentityNum">
                        <el-input v-model="ruleForm.patIdentityNum" ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="医生排班" prop="scheduling">
                <el-cascader
                        v-model="scheduling"
                        :options="options"
                        @change="schedulingChange" style="width: 100%" clearable>
                </el-cascader>
            </el-form-item>
            <el-form-item label="号源选择" prop="sourceDetail">
                <el-cascader
                        v-model="sourceDetail"
                        :options="sourceDetailOptions"
                        @change="appointmentChange" style="width: 100%" clearable>
                </el-cascader>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即预约</el-button>
                <el-button type="primary" @click="refreshSchedule()">排班刷新</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <div >
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :max-height="tableHeight"
                    border
                    ref="table"
                    @current-change="handleCurrentChange"
                    size="mini">
                <el-table-column
                        fixed
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        fixed
                        prop="patName"
                        label="就诊人"
                        sortable
                        align="center"
                        width="80">
                    <template slot-scope="scope">
                        <span @click="aClick(scope.row)" class="f-blue">{{scope.row.patName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="sufferName"
                        label="隶属账户"
                        sortable
                        align="center"
                        width="120">
                    <template slot-scope="scope">
                        <span @click.native.prevent="patientClick(scope.row)" class="f-blue">{{scope.row.sufferName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="patSex"
                        label="性别"
                        align="center"
                        :formatter="formatterSex"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="patIdentityNum"
                        label="身份证"
                        sortable
                        :show-overflow-tooltip="true"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="联系电话"
                        sortable
                        align="center"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="createDate"
                        align="center"
                        label="预约时间"
                        :show-overflow-tooltip="true"
                        sortable
                        width="150">
                    <template slot-scope="scope">
                    <span @click.native.prevent="patientClick(scope.row)" class="f-blue">{{scope.row.timeStamp}}</span>
                </template>
                </el-table-column>
                <el-table-column
                        prop="visitDate"
                        align="center"
                        label="就诊时间"
                        :show-overflow-tooltip="true"
                        sortable
                        width="150">
                    <template slot-scope="scope">
                        <span @click.native.prevent="patientClick(scope.row)" class="f-blue">{{scope.row.visitDate}}&nbsp;{{scope.row.visitTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="appStatus"
                        label="预约状态"
                        align="center"
                        sortable
                        :formatter="formatterAppStatus"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="serialNumber"
                        align="center"
                        label="号源编号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="sffName"
                        align="center"
                        label="预约操作员"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="cancelSffName"
                        align="center"
                        label="取消操作员"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="password"
                        align="center"
                        label="取号密码"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="timeState"
                        align="center"
                        label="上下午"
                        :formatter="formatterTimeState"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="depName"
                        label="科室名称"
                        sortable
                        :show-overflow-tooltip="true"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="doctorName"
                        label="医生姓名"
                        :show-overflow-tooltip="true"
                        sortable
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="binName"
                        label="挂号类型"
                        align="center"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="spName"
                        label="服务商"
                        sortable
                        :show-overflow-tooltip="true"
                        :formatter="formatterSpName"
                        align="center"
                        width="60">
                </el-table-column>
                <el-table-column
                        prop="hospitalId"
                        label="医院名称"
                        sortable
                        align="center"
                        :formatter="formatterHospital"
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index,scope.row)"
                                type="primary"
                                :disabled="scope.row.appStatus!=0 || scope.row.spName=='12580'"
                                size="mini" circle>
                            取消预约
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <div id="page">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            let validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('联系电话不能为空'));
                } else {
                    const reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]|19[0|1|2|3|5|6|7|8|9]|17[0|1|2|3|5|6|7|8|9])\d{8}$/
                    const reg3 = /\d{3}-\d{8}|\d{4}-\d{7}/
                    if (reg1.test(value)  ||  reg3.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的联系电话'));
                    }
                }
                callback();
            };
            let validateIdentityNum = (rule, value, callback) => {
                // 1 "验证通过!", 0 //校验不通过
                var format = /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
                //号码规则校验
                if (!format.test(value)) {
                    return callback(new Error('身份证号码不合规'));
                }
                //区位码校验
                //出生年月日校验   前正则限制起始年份为1900;
                var year = value.substr(6, 4), //身份证年
                    month = value.substr(10, 2), //身份证月
                    date = value.substr(12, 2), //身份证日
                    time = Date.parse(month + '-' + date + '-' + year), //身份证日期时间戳date
                    now_time = Date.parse(new Date()), //当前时间戳
                    dates = (new Date(year, month, 0)).getDate(); //身份证当月天数
                if (time > now_time || date > dates) {
                    return callback(new Error('出生日期不合规'));
                }
                //校验码判断
                var c = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); //系数
                var b = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'); //校验码对照表
                var id_array = value.split("");
                var sum = 0;
                for (var k = 0; k < 17; k++) {
                    sum += parseInt(id_array[k]) * parseInt(c[k]);
                }
                if (id_array[17].toUpperCase() != b[sum % 11].toUpperCase()) {
                    return callback(new Error('身份证校验码不合规'));
                }
                callback();
            };
            let validateSourceDetail = (rule, value, callback) => {
                console.log("ddddd"+this.patients)
                if (!value) {
                    return callback(new Error('联系电话不能为空'));
                } else {
                    const reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                    const reg3 = /\d{3}-\d{8}|\d{4}-\d{7}/
                    if (reg1.test(value)  ||  reg3.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的联系电话'));
                    }
                }
                callback();
            };
            let validateScheduling = (rule, value, callback) => {
                console.log("ddddd"+this.scheduling)
                if (!value) {
                    return callback(new Error('联系电话不能为空'));
                } else {
                    const reg1 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                    const reg3 = /\d{3}-\d{8}|\d{4}-\d{7}/
                    if (reg1.test(value)  ||  reg3.test(value)) {
                        callback();
                    } else {
                        return callback(new Error('请输入正确的联系电话'));
                    }
                }
                callback();
            };
            return {
                sourceTableData: [],  // 原始数据
                tableData: [],
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId,
                sffId: JSON.parse(localStorage.getItem("user")).id,
                currentPage: 1,
                pageSize:  15,
                totalPage: 1,
                total:1000,
                scheduling: null,
                sourceDetail: null,
                scrollDistance: 0,
                tableHeight: 250,
                patName: "",
                doctorName: '',
                depName: '',
                status: '6',
                isVisit: true,
                loading: false,
                currentUpRow: null,
                sufferId: '',
                patients: '',
                hospitals: '',
                patientsList: [],
                ruleForm: {
                    appStatus: null,
                    appType: null,
                    binId: null,
                    binName: null,
                    cancelDate: null,
                    cardType: null,
                    createDate: null,
                    depId: null,
                    depName: null,
                    doctorId: null,
                    doctorName: null,
                    hospitalId: null,
                    id: null,
                    password: null,
                    patCardNum: null,
                    patId: null,
                    sufferId:null,
                    patIdentityNum: null,
                    patName: null,
                    patSex: null,
                    phone: null,
                    schedulingId: null,
                    serialNumber: null,
                    sourceDetailId: null,
                    spName: null,
                    spNo: null,
                    takeCode: null,
                    takeTime: null,
                    timeStamp: null,
                    timeState: null,
                    visitDate: null,
                    visitTime: null,
                    visitDateTime:null
                },
                rules: {
                    hosName: [
                        {required: true, message: '请输入医院名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                    ],
                    spName: [
                        { required: true, message: '预约类型不能为空', trigger: 'change' }
                    ],
                    patName: [
                        { required: true, message: '预约患者姓名不能为空', trigger: 'change' }
                    ],
                    phone: [
                        { required: true, validator: validatePhone, trigger: ['blur', 'change'] }
                    ],
                    patIdentityNum: [
                        {required: true,  validator: validateIdentityNum, trigger: ['blur', 'change'] }
                    ],
                    patSex: [
                        { required: true, message: '请选择患者性别', trigger: 'change' }
                    ],
                    sourceDetailId: [
                        {required: true,  validator: validateSourceDetail, trigger: ['blur', 'change'] }
                    ]
                },
                value: [],
                options: JSON.parse(localStorage.getItem("options")),
                sourceDetailOptions: [],
                isPatientEdit: false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                datePickerArray: [new Date(), new Date()],
            }
        },
        methods: {
            lazyLoad() {
                let startDate;
                let endDate;
                if (this.datePickerArray){
                    startDate = this.datePickerArray[0]
                    endDate =  this.datePickerArray[1]
                }
                let params;
                if (this.isVisit){
                    params = [{name: 'startDate', value: startDate}, {
                        name: 'endDate',
                        value: endDate
                    }, {name: 'hospitalId', value: this.hospitalId}, {
                        name: 'appStatus',
                        value: this.status
                    }, {name: 'patName', value: this.patName}, {
                        name: 'depName',
                        value: this.depName
                    }, {name: 'doctorName', value: this.doctorName}]
                    if (this.status == 6) {
                        params = [{name: 'startDate', value: startDate}, {
                            name: 'endDate',
                            value: endDate
                        }, {name: 'hospitalId', value: this.hospitalId}, {
                            name: 'appStatus',
                            value: ''
                        }, {name: 'patName', value: this.patName}, {
                            name: 'depName',
                            value: this.depName
                        }, {name: 'doctorName', value: this.doctorName}]
                    }
                }else{
                    params = [{name: 'startDateC', value: startDate}, {
                        name: 'endDateC',
                        value: endDate
                    }, {name: 'hospitalId', value: this.hospitalId}, {
                        name: 'appStatus',
                        value: this.status
                    }, {name: 'patName', value: this.patName}, {
                        name: 'depName',
                        value: this.depName
                    }, {name: 'doctorName', value: this.doctorName}]
                    if (this.status == 6) {
                        params = [{name: 'startDateC', value: startDate}, {
                            name: 'endDateC',
                            value: endDate
                        }, {name: 'hospitalId', value: this.hospitalId}, {
                            name: 'appStatus',
                            value: ''
                        }, {name: 'patName', value: this.patName}, {
                            name: 'depName',
                            value: this.depName
                        }, {name: 'doctorName', value: this.doctorName}]
                    }
                }

                axios.post("http://" + window.location.host + '/ordAppointment/select_list_wrapper_Page', {
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "params": params
                }).then(res => {
                    this.tableData = res.data.data.content;
                }).catch((e) => {
                    alert('获取数据失败');
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentPageChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.lazyLoad()
            },
            aClick(row,index) {
                let sufferId = row.patId
                location.href = `../suffer/list.html?sufferId=${sufferId}`
            },
            patientClick(row,index) {
                let patId = row.sufferId
                location.href = `../patients/patients.html?patId=${patId}`
            },
            resizeHandler() {
                this.tableHeight = window.innerHeight - 80
                // let heightStyle = this.$refs.table.offsetHeight
                // this.tableHeight = heightStyle
            },
            chinese: function () {
                this.patName = this.patName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.depName = this.depName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.doctorName = this.doctorName.replace(/[^\u4E00-\u9FA5]/g, '');
            },
            init: function () {
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let that = this
                that.loading = false
                let startDate;
                let endDate;
                if (this.datePickerArray){
                    startDate = this.datePickerArray[0]
                    endDate = this.datePickerArray[1]
                }
                let params;
                console.log(this.isVisit)
                if (this.isVisit){
                    params = [{name: 'startDate', value: startDate}, {
                        name: 'endDate',
                        value: endDate
                    }, {name: 'hospitalId', value: this.hospitalId}, {
                        name: 'appStatus',
                        value: this.status
                    }, {name: 'patName', value: this.patName}, {name: 'depName', value: this.depName}, {
                        name: 'doctorName',
                        value: this.doctorName
                    }]
                    if (this.status == 6) {
                        params = [{name: 'startDate', value: startDate}, {
                            name: 'endDate',
                            value: endDate
                        }, {name: 'hospitalId', value: this.hospitalId}, {name: 'appStatus', value: ''}, {
                            name: 'patName',
                            value: this.patName
                        }, {name: 'depName', value: this.depName}, {name: 'doctorName', value: this.doctorName}]
                    }
                }else {
                    params = [{name: 'startDateC', value: startDate}, {
                        name: 'endDateC',
                        value: endDate
                    }, {name: 'hospitalId', value: this.hospitalId}, {
                        name: 'appStatus',
                        value: this.status
                    }, {name: 'patName', value: this.patName}, {name: 'depName', value: this.depName}, {
                        name: 'doctorName',
                        value: this.doctorName
                    }]
                    if (this.status == 6) {
                        params = [{name: 'startDateC', value: startDate}, {
                            name: 'endDateC',
                            value: endDate
                        }, {name: 'hospitalId', value: this.hospitalId}, {name: 'appStatus', value: ''}, {
                            name: 'patName',
                            value: this.patName
                        }, {name: 'depName', value: this.depName}, {name: 'doctorName', value: this.doctorName}]
                    }
                }

                axios.post("http://" + window.location.host + '/ordAppointment/select_list_wrapper_Page', {
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "params": params
                }).then(res => {
                    that.tableData = res.data.data.content;
                    that.totalPage = res.data.data.totalPage
                    this.totalPage = res.data.data.totalPage
                    this.total = res.data.data.totalSize
                    console.log(that.tableData)
                    loading.close();
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                    loading.close();
                });

            },
            initOther: function (){
                axios.post("http://" + window.location.host + '/hospital/select_list', {
                    hosName: '',
                    hospitalId: this.hospitalId
                }).then(res => {
                    console.log(res)
                    this.hospitals = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });

                console.log("获取数据失败: ",this.options)
                let flag = false;
                if (this.options ==null || this.options ==undefined || this.options.length ==0 ){
                    flag = true
                }else if (this.options.length ==1 && this.hospitalId==null){
                    flag = true
                }else if (this.options.length >1 && this.hospitalId!=null){
                    flag = true
                }

                if (flag){
                    this.refreshSchedule()
                }

            },
            refreshSchedule(){
                this.sourceDetail=null;
                let params = new URLSearchParams()
                params.append("hospitalId", this.hospitalId==null?0:this.hospitalId)
                axios.post("http://" + window.location.host + '/ordScheduling/selectListForOptions', params).then(res => {
                    this.options = res.data;
                    localStorage.setItem("options", JSON.stringify(res.data));
                    this.sourceDetailOptions = null;
                    this.isPatientEdit=false
                    this.closeDiglog();
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
                console.log(this.currentUpRow)
            },
            remoteMethod(query) {
                if (query !== '') {
                    axios.post("http://" + window.location.host + '/pubSufferer/select_list', {patName: query}).then(res => {
                        this.patientsList = res.data.data;
                    }).catch((e) => {
                        alert('获取数据失败');
                    });
                } else {
                    this.patientsList = [];
                }
            },
            clearPatients: function(){
                this.patients = ""
            },
            patientsChange: function (patients) {
                this.ruleForm.patName = patients.patName;
                this.ruleForm.patSex = patients.patSex;
                this.ruleForm.patCardNum = patients.patCardNum;
                this.ruleForm.patId = patients.id;
                this.ruleForm.sufferId = patients.patId;
                this.ruleForm.phone = patients.patPhone;
                this.ruleForm.patIdentityNum = patients.patIdentityNum;
                this.patientsList = []
                this.patients = patients.patName+'/'+patients.patIdentityNum+'/'+patients.patSexWrapper+'/'+patients.patPhone
            },
            schedulingChange: function (value) {
                this.sourceDetailOptions = null;
                this.sourceDetail=null;
                console.log(value)
                if (value.length == 4) {
                    let scheduling = value[3]
                    axios.get("http://" + window.location.host + '/ordSourceDetail/selectListForOptions', {params: {'schedulingId': scheduling.id}}).then(res => {
                        this.sourceDetailOptions = res.data;
                        console.log(res.data)
                    }).catch((e) => {
                        alert('获取数据失败');
                    });
                }
            },
            exportExcel: function () {
                let startDate = this.datePickerArray[0]
                let endDate =  this.datePickerArray[1]
                let params = [{name: 'startDate', value: startDate}, {
                    name: 'endDate',
                    value: endDate
                }, {name: 'hospitalId', value: this.hospitalId}, {
                    name: 'appStatus',
                    value: this.status
                }, {name: 'patName', value: this.patName}, {name: 'depName', value: this.depName}, {
                    name: 'doctorName',
                    value: this.doctorName
                }]
                if (this.status == 6) {
                    params = [{name: 'startDate', value: startDate}, {
                        name: 'endDate',
                        value: endDate
                    }, {name: 'hospitalId', value: this.hospitalId}, {name: 'appStatus', value: ''}, {
                        name: 'patName',
                        value: this.patName
                    }, {name: 'depName', value: this.depName}, {name: 'doctorName', value: this.doctorName}]
                }

                axios.post("http://" + window.location.host + '/ordAppointment/download',   {params: params}).then(res => {
                    this.$message({
                        type: 'success',
                        message: "导出数据成功！"
                    });
                    let a = document.createElement('a')
                    a.href ="http://" + window.location.host + "/" + res.data.msg;
                    a.click();
                }).catch((e) => {
                    alert('获取数据失败');
                });
            },
            appointmentChange: function (value) {
                let sourceDetail = value[0]
                this.ruleForm.appStatus = 0
                this.ruleForm.appType = 0
                this.ruleForm.binId = sourceDetail.binId
                this.ruleForm.binName = sourceDetail.binName
                this.ruleForm.depId = sourceDetail.depId
                this.ruleForm.depName = sourceDetail.depName
                this.ruleForm.doctorId = sourceDetail.doctorId
                this.ruleForm.doctorName = sourceDetail.doctorName
                this.ruleForm.schedulingId = sourceDetail.schedulingId
                this.ruleForm.serialNumber = sourceDetail.serialNumber
                this.ruleForm.sourceDetailId = sourceDetail.id
                this.ruleForm.timeState = sourceDetail.timeState
                this.ruleForm.visitDate = sourceDetail.schedulingDate
                this.ruleForm.visitTime = sourceDetail.visitTime
                this.ruleForm.visitDateTime=sourceDetail.schedulingDate+":"+sourceDetail.visitTime;

            },
            dialogFormOpen: function () {
                this.dialogFormVisible = true
            },
            getTreeData(data) {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].children == null || data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        data[i].children = undefined;
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children);
                    }
                }
                return data;
            },
            closeDiglog: function () {
                this.patientsList = []
                this.patients = undefined
                this.scheduling = ''
                this.sourceDetail = ''
                this.sourceDetailOptions= []
                this.ruleForm = {
                    appStatus: null,
                    appType: null,
                    binId: null,
                    binName: null,
                    cancelDate: null,
                    cardType: null,
                    createDate: null,
                    depId: null,
                    depName: null,
                    doctorId: null,
                    doctorName: null,
                    hospitalId: null,
                    id: null,
                    password: null,
                    patCardNum: null,
                    patId: null,
                    sufferId: null,
                    patIdentityNum: null,
                    patName: null,
                    patSex: null,
                    phone: null,
                    schedulingId: null,
                    serialNumber: null,
                    sourceDetailId: null,
                    spName: null,
                    spNo: null,
                    takeCode: null,
                    takeTime: null,
                    timeStamp: null,
                    timeState: null,
                    visitDate: null,
                    visitTime: null
                }
            },
            formatterHospital: function (row, column) {
                for (let i = 0; i < this.hospitals.length; i++) {
                    if (row.hospitalId == this.hospitals[i].id) {
                        return this.hospitals[i].hosName
                    }
                }
            },
            formatterSex: function (row, column) {
                if (row.patSex == 1 || row.patSex == '1') {
                    return "男"
                } else if (row.patSex == 0 || row.patSex == '0') {
                    return "女"
                } else {
                    return "其他"
                }
            },
            formatterSpName: function (row, column) {
                if (row.spName == 'jkt') {
                    return "健康通"
                } else if (row.spName == 'weixin') {
                    return "微信"
                } else if (row.spName == 'alipay') {
                    return "支付宝"
                } else if (row.spName == 'weibo') {
                    return "微博"
                } else if (row.spName == 'dy') {
                    return "抖音"
                } else {
                    return row.spName
                }
            },
            formatterAppStatus: function (row, column) {
                let appStatus = ""
                switch (row.appStatus) {
                    case 0:
                        appStatus = "预约";
                        break;
                    case 1:
                        appStatus = "过期未取号";
                        break;
                    case 2:
                        appStatus = "已取号";
                        break;
                    case 3:
                        appStatus = "患者取消";
                        break;
                    case 4:
                        appStatus = "医生停诊";
                        break;
                    case 5:
                        appStatus = "后台取消";
                        break;
                    default:
                        appStatus = "未知";
                }
                return appStatus;
            },
            formatterTimeState: function (row, column) {
                let timeState = ""
                switch (row.timeState) {
                    case 1:
                        timeState = "上午";
                        break;
                    case 2:
                        timeState = "下午";
                        break;
                    case 3:
                        timeState = "夜门诊";
                        break;
                    default:
                        timeState = "未知";
                }
                return timeState;
            },
            submitForm: function (ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        if (this.ruleForm.sourceDetailId==undefined){
                            this.$message({
                                type: 'info',
                                message: '预约信息不能为空！'
                            });
                            return -1
                        }
                        this.ruleForm.sffId=this.sffId
                        axios.post("http://" + window.location.host + '/ordAppointment/createByBack', this.ruleForm).then(res => {
                            if (res.data.code==500){
                                this.$message({
                                    type: 'error',
                                    message: res.data.msg
                                });
                            }else {
                                this.init()
                                this.ruleForm = {
                                    chinaSpell: null,
                                    description: "",
                                    fiveStroke: null,
                                    hosCode: "",
                                    hosContactAddress: null,
                                    hosGrade: "3",
                                    hosMarkCode: null,
                                    hosName: "",
                                    hosPhone: null,
                                    hosRegionalCode: null,
                                    hosShortName: null,
                                    hosType: null,
                                    hosWeb: null,
                                    id: null,
                                    status: "0"
                                }
                                this.dialogFormVisible = false
                                this.$message({
                                    type: 'success',
                                    message: "预约成功！"
                                });
                            }
                        }).catch(function (error) {
                            alert(error.response.data.message)

                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            deleteRow: function (index, row) {
                this.$confirm('取消用户预约记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let params = new URLSearchParams()
                    params.append("id", row.id)
                    console.log(row.id);
                    row.cancelSffId=this.sffId
                    axios.post("http://" + window.location.host + '/ordAppointment/cancelByBack',
                        row
                    ).then(res => {
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                        this.tableData.splice(index, 1);
                        this.init()
                    }).catch(function (error) {
                        alert(error.response.data.message)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            editRow: function (index, row) {
                if (row.appStatus == 0) {
                    this.ruleForm = row;
                    console.log(this.ruleForm)
                    this.dialogFormVisible = true
                } else if (row.appStatus == 1 || row.appStatus == 2) {
                    this.$message({
                        type: 'success',
                        message: '已取号或者已过期 不允许修操作!'
                    });
                } else {
                    this.$message({
                        type: 'success',
                        message: '请先还原在修改!'
                    });
                }

            },
            //设置指定行、列、具体单元格颜色
            cellStyle: function (row, column, rowIndex, columnIndex) {
                if (row.row.appStatus == 1 || row.row.appStatus == 5) {
                    return 'color:red' //rgb(105,0,7)
                } else if (row.row.appStatus == 2) {
                    return 'color:green' //rgb(105,0,7)
                } else if (row.row.appStatus == 3) {
                    return 'color:black' //rgb(105,0,7)
                } else {
                    return '' //rgb(105,0,7)
                }
            }
        },
        created() {
            this.initOther()
            this.init()
            this.refreshSchedule()
        },
        watch: {
            status: function (val, oldval) {
                this.$tableDom.scrollTop = 0
                this.init();
            },
            pageSize:function (newValue, oldValue) {
                this.lazyLoad()
            },
            patients: function (newValue, oldValue) {
                if (newValue=="" || newValue==undefined){
                    this.isPatientEdit=false
                }else {
                    this.isPatientEdit=true
                }
            },
            'ruleForm.sufferId': function (val, oldval) {
                console.log(val,oldval)
                if (parseInt(val)>0){
                    this.isPatientEdit=true
                }
            },
        },
        mounted:function(){
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
                // 监听窗口大小变化
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 80
                }
            })
            //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
            //100表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
        }
    });
</script>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
</html>
